<template>
  <view
    class="l-tag flex-row flex-center padding-10 relative"
    :class="[(plain?'l-tag-plain-':'l-tag-') + type,plain?'l-tag-plain':'']"
    :style="{width,height,padding,margin,borderRadius:radius,borderWidth}"
    @click="onclick"
  >
    <view v-if="plain" class="l-tag-background" :class="['l-tag-'+type]" :style="{borderRadius:radius}" />
    <text class="relative" style="z-index:2" :class="[plain ? type === 'secondary' ? 'color-t3' : 'color-' + type : 'color-white']" :style="{fontSize}">{{ text }}</text>
  </view>
</template>

<script>
export default {
  name: 'LTag',
  props: {
    text: {
      type: [String, null],
      default: ''
    },
    type: { // primary  secondary  success  warning  error
      type: [String, null],
      default: 'primary'
    },
    radius: {
      type: String,
      default: '6rpx'
    },
    width: {
      type: String,
      default: ''
    },
    height: {
      type: String,
      default: '46rpx'
    },
    padding: {
      type: String,
      default: '10rpx'
    },
    margin: {
      type: String,
      default: ''
    },
    fontSize: {
      type: String,
      default: '26rpx'
    },
    plain: {
      type: Boolean,
      default: false
    },
    borderWidth: {
      type: String,
      default: '2rpx'
    }
  },
  methods: {
    onclick() {
      this.$emit('click')
    }
  }
}
</script>

<style scoped lang="scss">
.l-tag{
  height: 46rpx;
  border-radius: 6rpx;
  overflow: hidden;
  background:$color-secondary;
}
.l-tag-background{
  @include position(absolute,0,0,0,0);
  z-index:1;
  opacity: .1;
}
.l-tag-plain{
  border:2rpx solid $color-primary;
  background:rgba(0,0,0,0);
}
.l-tag-primary{
  background-color:$color-primary;
}
.l-tag-secondary{
  background-color:$color-secondary;
}
.l-tag-success{
  background-color:$color-success;
}
.l-tag-warning{
  background-color:$color-warning;
}
.l-tag-error{
  background-color:$color-error;
}
.l-tag-plain-primary{
  border-color:$color-primary;
}
.l-tag-plain-secondary{
  border-color:$color-secondary;
}
.l-tag-plain-success{
  border-color:$color-success;
}
.l-tag-plain-warning{
  border-color:$color-warning;
}
.l-tag-plain-error{
  border-color:$color-error;
}

</style>
